<template>
  <div class="bg">
    <div class="top" @click="goback">
      <div class="top-left">天津静海子牙精细技术开发区高新产业园</div>
      <div class="top-rghit">
        <div class="year">{{ currentDate }}</div>
        <div class="time">{{ currentTime }}</div>
      </div>
    </div>
    <div class="content">
      <!-- 左侧园区展示 -->
      <div class="content-left">
        <div class="exhibitionbg mb20"></div>
        <div class="exhibitionlist">
          <div
            class="exhibition-item"
            v-for="(item, index) in parkDisplay"
            :key="index"
          >
            <img class="exhibition-item-img" :src="item.display_image_path" />
            <div class="exhibition-item-btm fcc f14cf">
              {{ item.display_map_name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 中间核心数据 -->
      <div class="content-centre">
        <div class="business-data">总企业数</div>
        <div class="business-num">
          {{ dataDashboard.total_enterprise_count }}
        </div>

        <div class="area">
          <div class="project item">
            <div class="boxtext">
              <div class="boxtext-top">规划面积</div>
              <div class="boxtext-btoom">
                {{ dataDashboard.planned_area }} km²
              </div>
            </div>
          </div>
          <div class="activate item">
            <div class="boxtext">
              <div class="boxtext-top">已建成面积</div>
              <div class="boxtext-btoom">
                {{ dataDashboard.built_area }} km²
              </div>
            </div>
          </div>
          <div class="worker item">
            <div class="boxtext">
              <div class="boxtext-top">产业工人 (人)</div>
              <div class="boxtext-btoom">
                {{ dataDashboard.industrial_worker_count }}
              </div>
            </div>
          </div>
        </div>

        <div class="supplybg"></div>
        <div class="quantity mb30">
          <div class="quantity-item fcc">
            <div class="fcolcc">
              <div class="f28bcf">{{ dataDashboard.transaction_volume }}</div>
              <div class="f14cf">成交数量(笔)</div>
            </div>
          </div>
          <div class="quantity-item fcc">
            <div class="fcolcc">
              <div class="f28bcf">
                ￥{{ formatAmount(dataDashboard.transaction_amount) }}
              </div>
              <div class="f14cf">成交金额(元)</div>
            </div>
          </div>
        </div>

        <div class="industrybg"></div>
        <div class="enterprise-stats-container">
          <!-- 左侧饼状图 -->
          <div class="pie-chart-container">
            <div class="pie-chart" ref="pieChart"></div>
          </div>
          <!-- 右边列表 -->
          <!-- 右边列表 -->
          <div class="enterpriselist">
            <div
              v-for="(item, index) in enterpriseList"
              :key="index"
              class="enterpris-item fc f14cf"
              :class="{ active: activeIndex === index }"
              @click="activeIndex = index"
            >
              <div class="selection-indicator">
                <img
                  v-if="activeIndex === index"
                  src="@/assets/image/info/selected-icon.png"
                  class="selected-icon"
                />
              </div>
              {{ item.name }}：{{ item.value }} 家
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧园区信息 -->
      <div class="content-right ml20">
        <div class="overallbg mb15"></div>
        <img class="overallimg mb30" :src="dataDashboard.park_brand_image" />

        <div class="developbg mb15"></div>
        <img
          class="developbox mb30"
          :src="dataDashboard.park_development_image"
        />
        <!-- <div class="developbox">
          <div class="fc">
            <div class="f20bcf">1992年</div>
            <div class="f16cf ml20">始建，其前身为静海经济开发区</div>
          </div>
          <div class="fc">
            <div class="f20bcf">2017年</div>
            <div class="f16cf ml20">
              并入国家级经济技术开发区-子牙经济技术开发区
            </div>
          </div>
          <div class="fc mb25">
            <div class="f20bcf">2025年</div>
            <div class="f16cf ml20">实现与天开高教科创园联动发展</div>
          </div>
          <div class="f20bc158BE8 fcolcc">
            <div>中国自行车电动车自行车之都</div>
            <div>天津市高端电动车 (自行车) 产业主题园区</div>
            <div>国家级中小企业特色产业集群</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import * as echarts from "echarts";
import infoApi from "@/api/info";
const router = useRouter();
const route = useRoute();
// 数据状态
const dataDashboard = ref({
  total_enterprise_count: 0,
  planned_area: "0.00",
  built_area: "0.00",
  industrial_worker_count: 0, 
  transaction_volume: "0.00",
  transaction_amount: "0.00",
  park_brand_image: "",
  park_development_image: "",
});

const parkDisplay = ref([]);

// 当前时间
const currentDate = ref("");
const currentTime = ref("");

// 计算企业统计数据
const enterpriseStats = computed(() => ({
  高新技术企业: dataDashboard.value.high_tech_enterprise_count || 0,
  制造业企业: dataDashboard.value.manufacturing_enterprise_count || 0,
  国家级高新企业: dataDashboard.value.national_high_tech_enterprise_count || 0,
  外资企业: dataDashboard.value.foreign_invested_enterprise_count || 0,
  专精特新中小企业:
    dataDashboard.value.specialized_and_sophisticated_sme_count || 0,
  创新型中小企业: dataDashboard.value.innovative_sme_count || 0,
  瞪羚企业: dataDashboard.value.gazelle_enterprise_count || 0,
  独角兽企业: dataDashboard.value.unicorn_enterprise_count || 0,
  上市公司: dataDashboard.value.listed_company_count || 0,
}));

// 格式化金额
const formatAmount = (amount) => {
  if (!amount) return "0.00";
  return parseFloat(amount).toLocaleString("zh-CN", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentDate.value = `${now.getFullYear()}.${(now.getMonth() + 1)
    .toString()
    .padStart(2, "0")}.${now.getDate().toString().padStart(2, "0")}`;
  currentTime.value = `${now.getHours().toString().padStart(2, "0")} : ${now
    .getMinutes()
    .toString()
    .padStart(2, "0")} : ${now.getSeconds().toString().padStart(2, "0")}`;
};
// 颜色配置
const colors = ["#00EEFF", "#E81542", "#158BE8", "#27E99D", "#E89900"];

// 响应式数据

const activeIndex = ref(0);
const activeEnterprise = ref(null);
const pieChart = ref(null);

// 计算饼图数据
const pieChartData = computed(() => {
  if (!dataDashboard.value) return [];

  return [
    {
      value: parseInt(dataDashboard.value.other_enterprise_count) || 0,
      name: "其他企业",
    },
    {
      value:
        parseInt(dataDashboard.value.foreign_invested_enterprise_count) || 0,
      name: "外资企业",
    },
    {
      value: parseInt(dataDashboard.value.high_tech_enterprise_count) || 0,
      name: "四上企业",
    },
    {
      value:
        parseInt(dataDashboard.value.national_high_tech_enterprise_count) || 0,
      name: "国家高新技术企业",
    },
    {
      value: parseInt(dataDashboard.value.manufacturing_enterprise_count) || 0,
      name: "制造企业",
    },
  ];
});

// 计算企业列表数据
// 计算企业列表数据
const enterpriseList = computed(() => {
  if (!dataDashboard.value) return [];

  return [
    {
      name: "专精特新中小企业",
      value: dataDashboard.value.specialized_and_sophisticated_sme_count || "0",
    },
    {
      name: "专精特新小巨人",
      value:
        dataDashboard.value.specialized_and_sophisticated_little_count || "0",
    },
    {
      name: "战略性新兴企业",
      value: dataDashboard.value.innovative_sme_count || "0",
    },
    {
      name: "市级单项冠军",
      value: dataDashboard.value.municipal_singular_leader_count || "0",
    },
    {
      name: "雏鹰企业",
      value: dataDashboard.value.gazelle_enterprise_count || "0",
    },
    {
      name: "国家级单项冠军",
      value: dataDashboard.value.national_singular_leader_count || "0",
    },
    {
      name: "瞪羚企业",
      value: dataDashboard.value.unicorn_enterprise_count || "0",
    },
    {
      name: "上市公司",
      value: dataDashboard.value.listed_company_count || "0",
    },
  ];
});

// 初始化饼图
const initPieChart = () => {
  if (!pieChart.value) return;

  const chart = echarts.init(pieChart.value);
  const option = {
    // title: {
    //   text: "产业布局",
    //   left: "center",
    //   top: "center",
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 16,
    //     fontWeight: "bold",
    //   },
    // },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c}家 ({d}%)",
    },
    // 在饼图配置中修改graphic部分
    // 修改饼图配置中的graphic部分
    graphic: [
      {
        type: "circle",
        shape: {
          cx: "50%",
          cy: "50%",
          r: "46.5px", // 93px直径的一半
        },
        style: {
          fill: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(21,139,232,0.3)", // 顶部较浅
              },
              {
                offset: 0.5,
                color: "rgba(21,139,232,0.7)", // 中间过渡
              },
              {
                offset: 1,
                color: "#158BE8", // 底部最深
              },
            ],
          },
          shadowColor: "#158BE8",
          shadowBlur: 10,
        },
        z: 2,
      },
      {
        type: "text",
        left: "center",
        top: "center",
        style: {
          text: "产业布局",
          textAlign: "center",
          fill: "#FFFFFF",
          fontFamily: "Alimama ShuHeiTi",
          fontWeight: "bold",
          fontSize: 18,
        },
        z: 3,
      },
    ],
    series: [
      // 内层粗饼图（颜色较淡）
      {
        name: "企业分布",
        type: "pie",
        radius: ["35%", "55%"],
        center: ["50%", "50%"],
        itemStyle: {
          borderColor: "#0A1B37",
          borderWidth: 2,
          opacity: 0.7, // 降低内层透明度
        },
        label: {
          show: false, // 内层不显示标签
        },
        labelLine: {
          show: false,
        },
        data: pieChartData.value.map((item, index) => ({
          ...item,
          itemStyle: {
            color: colors[index],
            opacity: 0.3, // 颜色变淡
          },
        })),
      },
      // 外层细饼图
      {
        name: "企业分布",
        type: "pie",
        radius: ["60%", "70%"],
        center: ["50%", "50%"],
        itemStyle: {
          borderColor: "#0A1B37",
          borderWidth: 2,
          borderWidth: 1, // 细边框
        },
        label: {
          show: true,
          formatter: "{b}: {c}家",
          position: "outside",
          color: "#fff",
          fontSize: 12,
          fontWeight: "bold",
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 15,
          lineStyle: {
            width: 1,
            color: "rgba(255, 255, 255, 0.5)",
          },
        },
        data: pieChartData.value.map((item, index) => ({
          ...item,
          itemStyle: {
            color: colors[index],
          },
        })),
      },
    ],
  };
  chart.setOption(option);

  window.addEventListener("resize", function () {
    chart.resize();
  });
};
// 获取数据
const fetchData = async () => {
  try {
    const response = await infoApi.getDataDashboard();
    if (response.code === 200) {
      dataDashboard.value = response.data.data.dataDashboard;
      parkDisplay.value = response.data.data.parkDisplay;

      // 确保DOM更新后初始化图表
      nextTick(() => {
        const chart = initPieChart();
        if (enterpriseList.value.length > 0) {
          activeEnterprise.value = enterpriseList.value[0];
        }
      });
    }
  } catch (error) {
    console.error("获取数据大屏数据失败:", error);
  }
};
const redirect = route.query.redirect ? route.query.redirect : "/";
const goback = () => {
  router.push(redirect);
};
// 初始化
onMounted(() => {
  updateTime();
  fetchData();

  // 每秒更新时间
  setInterval(updateTime, 1000);

  // 每30秒刷新数据
  setInterval(fetchData, 30000);
});
</script>

<style lang="less" scoped>
/* 重置默认边距 */
body,
html {
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
}
.bg {
  /* 确保路径正确，从 src/assets 开始 */
  background: url("@/assets/image/info/背景.png") no-repeat center center;
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed; /* 关键：固定背景 */
  min-height: 100vh;
  width: 100%;
  position: relative; /* 改为相对定位 */
  overflow-y: auto; /* 关键：允许垂直滚动 */
  z-index: 0;
  .top {
    background: url("@/assets/image/info/头部.png") no-repeat center center;
    height: 135px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 120px;
    box-sizing: border-box;
    // margin-bottom: 30px;
    .top-left {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 162px;
    }
    .top-rghit {
      display: flex;
      align-items: center;
      .year {
        font-family: DIN;
        font-weight: 400;
        font-size: 22px;
        color: #ffffff;
        line-height: 162px;
      }
      .time {
        margin-left: 20px;
        font-family: DIN;
        font-weight: bold;
        font-size: 26px;
        color: #ffffff;
        line-height: 162px;
      }
    }
  }
  .content {
    min-height: calc(100vh - 135px); /* 减去顶部高度 */
    padding: 0 50px 30px;
    box-sizing: border-box;
    display: flex;
    // align-items: center;
    justify-content: space-between;
    .content-left {
      //   width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .exhibitionbg {
        background: url("@/assets/image/info/园区展示.png") no-repeat left
          center;
        height: 44px;
        width: 100%;
        margin-bottom: 10px;
      }
      .exhibitionlist {
        width: 470px;
        height: 100%;
        background: linear-gradient(
          -270deg,
          rgba(26, 73, 135, 0) 0%,
          #1a4987 48%,
          rgba(26, 73, 135, 0) 100%
        );
        opacity: 0.6;
        display: flex;
        flex-wrap: wrap; // 允许换行
        // gap: 10px; // 间隔10px
        padding: 18px 11px; // 可选：容器内边距
        box-sizing: border-box;
        .exhibition-item {
          width: 200px;
          height: 111px;
          position: relative;

          &:nth-child(odd) {
            margin-right: 10px; // 奇数项右间隔
          }

          .exhibition-item-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .exhibition-item-btm {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 30px;
            background: #3c7acd;
            opacity: 0.7;
          }
        }
      }
    }
    .content-centre {
      //   width: 838px;
      flex: 1;
      display: flex;
      flex-direction: column;
      .enterprise-stats-container {
        display: flex;
        // height: 320px;
        // margin-top: 20px;
        padding: 20px 26px;
        box-sizing: border-box;
        background: rgba(26, 73, 135, 0.3);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        .enterpriselist {
          .enterpris-item {
            width: 340px;
            height: 40px;
            background: linear-gradient(
              -270deg,
              rgba(26, 73, 135, 0) 0%,
              #1a4987 48%,
              rgba(26, 73, 135, 0) 100%
            );
            opacity: 0.6;
            margin-bottom: 1px;
            padding-left: 10px;
            cursor: pointer;
            transition: all 0.3s;

            &.active {
              opacity: 1;
              background: linear-gradient(
                -270deg,
                rgba(26, 73, 135, 0) 0%,
                #1a4987 68%,
                rgba(26, 73, 135, 0) 100%
              );
            }

            .selection-indicator {
              width: 20px;
              height: 20px;
              margin-right: 10px;
              display: flex;
              align-items: center;
              justify-content: center;

              .selected-icon {
                width: 25px;
                height: 25px;
              }

              .unselected-placeholder {
                width: 16px;
                height: 16px;
                border: 1px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
              }
            }
          }
        }
        .pie-chart-container {
          flex: 1;
          display: flex;
          padding: 15px;

          .pie-chart {
            width: 100%;
            height: 300px; /* 设置固定高度 */
          }

          .pie-legend {
            width: 40%;
            padding: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .legend-item {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              font-size: 14px;

              .legend-color {
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 3px;
                margin-right: 8px;
              }

              .legend-text {
                color: #fff;
              }
            }
          }
        }
      }
      .business-data {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        text-shadow: 0px 3px 16px rgba(4, 7, 29, 0.5);
        background: linear-gradient(
          180deg,
          #ffffff 43.115234375%,
          #67cfff 99.0478515625%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 20px;
      }
      .business-num {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: D-DIN;
        font-weight: bold;
        font-size: 100px;
        color: #ffffff;
        text-shadow: 0px 3px 16px rgba(4, 7, 29, 0.5);
        background: linear-gradient(
          180deg,
          #ffffff 43.115234375%,
          #67cfff 99.0478515625%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .area {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 28px;
        .project {
          background: url("@/assets/image/info/规划面积.png") no-repeat center
            center;
        }
        .activate {
          background: url("@/assets/image/info/已建成面积.png") no-repeat center
            center;
        }
        .worker {
          background: url("@/assets/image/info/产业工人 (人).png") no-repeat
            center center;
        }
        .item {
          width: 241px;
          height: 97px;
          padding: 22px 0;
          box-sizing: border-box;
          .boxtext {
            height: 100%;
            margin-left: 97px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .boxtext-top {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
            }
            .boxtext-btoom {
              font-family: DIN;
              font-weight: bold;
              font-size: 28px;
              color: #ffffff;
            }
          }
        }
      }
      .supplybg {
        background: url("@/assets/image/info/供需大厅.png") no-repeat left
          center;
        height: 44px;
        width: 838px;
        margin-bottom: 10px;
      }
      .quantity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .quantity-item {
          background: url("@/assets/image/info/数量.png") no-repeat center
            center;
          height: 97px;
          width: 100%;
        }
      }
      .industrybg {
        background: url("@/assets/image/info/产业布局.png") no-repeat left
          center;
        height: 44px;
        width: 100%;
        margin-bottom: 10px;
      }
    }
    .content-right {
      flex: 1;
      //   width: 100%;
      .overallbg {
        background: url("@/assets/image/info/园区布局.png") no-repeat left
          center;
        height: 44px;
        width: 100%;
        margin-bottom: 10px;
      }
      .overallimg {
        width: 100%;
        // height: auto;
        height: 365px;
        object-fit: cover;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
      .developbg {
        background: url("@/assets/image/info/园区发展.png") no-repeat left
          center;
        height: 44px;
        width: 100%;
        margin-bottom: 4px;
      }
      .developbox {
        height: 365px;
        width: 100%;
        // padding: 25px 29px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: rgba(26, 73, 135, 0.6);
        border-radius: 4px;
      }
    }
  }
}
.f28bcf {
  font-family: DIN;
  font-weight: bold;
  font-size: 28px;
  color: #ffffff;
}
.f14cf {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
.fcc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fcolcc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fc {
  display: flex;
  align-items: center;
}
.mb25 {
  margin-bottom: 25px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb15 {
  margin-bottom: 15px;
}
.ml20 {
  margin-left: 20px;
}
.f20bcf {
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 20px;
  color: #ffffff;
  //   line-height: 162px;
  text-shadow: 0px 3px 16px rgba(4, 7, 29, 0.5);
  background: linear-gradient(
    180deg,
    #ffffff 43.115234375%,
    #67cfff 99.0478515625%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f16cf {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  //   line-height: 162px;
  text-shadow: 0px 3px 16px rgba(4, 7, 29, 0.5);
  background: linear-gradient(
    180deg,
    #ffffff 43.115234375%,
    #67cfff 99.0478515625%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f20bc158BE8 {
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 20px;
  color: #158be8;
  //   line-height: 162px;
  text-stroke: 2px #ffffff;
  -webkit-text-stroke: 2px #ffffff;
}
</style>
